CSSで枠線を描画 (3)上下左右の変化
CSSを使った枠線の描画テクニックも今回が最終回。これまでは上下左右の線、および余白すべてに対して同じ指定を行ってきましたが、CSSではこれらを個別に指定することも可能です。しっかりとマスターして、ホームページのリニューアルなどに活用していきましょう。

→ 上下左右で枠線の太さを変化させる
 
スタイルシート「border-width:」では、上下左右のすべての枠線に対し、まとめて線の太さを指定していました。しかし、これらの線の太さを一つひとつ個別に指定することも可能です。「border-top-width:」は上の線の太さについて、同様に「border-bottom-width:」は下の線の太さ、「border-left-width:」は左の線の太さ、「border-right-width:」は右の線の太さを指定できます。また線の太さを「0px」に指定すると、その線だけが表示されなくなります。つまり、上下だけに枠線を表示するといった変則的な枠線を作り出すことも可能なわけです。
<P style="border-style:solid ; border-color:#FF9900 ;
border-top-width:10px ; border-bottom-width:1px ;
border-left-width:10px ; border-right-width:1px ;
padding:10px ; margin:20% ; background-color:#FFFFCC">
<FONT size="3" color="#CC0033"><B><U>
CSSを使った枠線
</U></B></FONT><BR>
<FONT size="2" color="#333333"><BR>
CSSを使用すると、このようなデザインのコラムを簡単に作成することができます。枠線の形式や色、余白などを上手に調整して、カッコいいデザインを作成してみてはいかがでしょうか? 上下左右の線の太さを個別に変化させることも、ほら、このとおり!
</FONT>
</P>


→ 上下左右で枠線の色を変化させる
 
線の色についても個別に指定することができます。上の線の色は「border-top-color:」で指定、同様に「border-bottom-color:」は下の線の色、「border-left-color:」は左の線の色、「border-right-color:」は右の線の色、となります。
<P style="border-style:solid ; border-width:20px ;
border-top-color:#FF3333 ; border-bottom-color:#009966 ;
border-left-color:#3333CC ; border-right-color:#FFFF33 ;
padding:10px ; margin:20% ; background-color:#FFFFFF">
<FONT size="3" color="#3300CC"><B><U>
CSSを使った枠線
</U></B></FONT><BR>
<FONT size="2" color="#333333"><BR>
CSSを使用すると、このようなデザインのコラムを簡単に作成することができます。枠線の形式や色、余白などを上手に調整して、カッコいいデザインを作成してみてはいかがでしょうか? 上下左右の線の太さだけでなく、色も個別に変化させちゃいました。
</FONT>
</P>


→ 上下左右で余白を変化させる
 
文字などの内容と枠線の余白、およびページと枠線の余白についても、上下左右を個別に指定することが可能です。内容と枠線の余白は「padding-top:」、ページと枠線の余白は「margin-left:」という具合に、「-」(ハイフン)に続けて「top」「bottom」「left」「right」を記述することで、上下左右の余白を自由自在に操ることができるようになります。
<P style="border-style:dashed ; border-width:3px ; border-color:#0099CC ;
padding-top:10px ; padding-bottom:10px ;
padding-left:20px ; padding-right:20px ;
margin-top:20px ; margin-left:50% ;
background-color:#FFFFCC">
<FONT size="3" color="#FF6633"><B><U>
CSSを使った枠線
</U></B></FONT><BR>
<FONT size="2" color="#333333"><BR>
CSSを使用すると、このようなデザインのコラムを簡単に作成することができます。枠線の形式や色、余白などを上手に調整して、カッコいいデザインを作成してみてはいかがでしょうか? 上下左右の線の太さだけでなく、色や余白も個別に変化させちゃいました。
</FONT>
</P>


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze